/**
 * Created by Shinelon on 2017-12-14.
 */
$(function () {
    $('#test').on('mousemove', function(e){
        var offset = $('#test').offset()
        var x = e.pageX - offset.left
        var y = e.pageY - offset.top
        var centerX = $('#test').outerWidth() /2
        var centerY = $('#test').outerHeight() /2
        var deltaX = x - centerX
        var deltaY = y - centerY
        var percentX = deltaX / centerX
        var percentY = deltaY / centerY
        var deg = 20

        $('#banner').css({
            transform: 'rotateX('+deg*-percentY + 'deg)'+
            ' rotateY('+deg*percentX+'deg)'
        })

    })

    $('#test').on('mouseleave', function(){
        $('#banner').css({
            transform: ''
        })


    })
    var i = 0;
    $('.ding li').mouseenter(function () {
        i= $(this).index()
        $('.bt ul li').eq(i).fadeIn(300);
        $('.bt ul li').eq(i).siblings().fadeOut(300);
        $(this).removeClass('yang2').addClass('yang')
        $(this).siblings().removeClass('yang').addClass('yang2')
    })
    $('.you3').click(function () {
    	var yin = $("#yin1").val()-1;
        if(i==yin){
            i=0;
        }else{
            i++;
        }
        $('.bt ul li').eq(i).fadeIn(300);
        $('.bt ul li').eq(i).siblings().fadeOut(300);
        $('.ding li').eq(i).removeClass('yang2').addClass('yang')
        $('.ding li').eq(i).siblings().removeClass('yang').addClass('yang2')
    })
    $('.zuo3').click(function () {
    	var yin = $("#yin1").val()-1;
        if(i==0){
            i=yin;
        }else{
            i--;
        }
        $('.bt ul li').eq(i).fadeIn(300);
        $('.bt ul li').eq(i).siblings().fadeOut(300);
        $('.ding li').eq(i).removeClass('yang2').addClass('yang')
        $('.ding li').eq(i).siblings().removeClass('yang').addClass('yang2')
    })
   $('#banner').mouseenter(function () {
       $('.zuo3').css('opacity','0.5')
       $('.you3').css('opacity','0.5')
   })
    $('#banner').mouseleave(function () {
        $('.zuo3').css('opacity','0.1')
        $('.you3').css('opacity','0.1')
    })
})
